<template>
  <view class="container">
    <view class="position-relative">
      <image
        src="https://img-shop.qmimg.cn/s16/images/2020/01/20/9a82219bedcae5c2.jpeg"
        class="bg"
      ></image>
    </view>

    <view class="user-box">
      <view class="login" v-if="!isLogin">
        <button
          type="primary"
          size="default"
          class="login-btn"
          @click="login"
          lang="zh_CN"
        >
          请先登陆
        </button>
      </view>
      <view class="user-detailed" v-if="isLogin">
        <view class="user-img">
          <image :src="member.avatarUrl"></image>
        </view>
        <view class="user-name">{{member.nickName}}</view>
      </view>
    </view>
    <!-- service box begin -->
    <view class="service-box">
      <view
        class="font-size-lg text-color-base font-weight-bold"
        style="margin-bottom: 20rpx"
        >我的服务</view
      >
      <view class="row">
        <view class="grid">
          <view class="image">
            <image src="/static/images/mine/lxkf.png"></image>
          </view>
          <view>联系客服</view>
        </view>
        <view class="grid" @tap="orders">
          <view class="image">
            <image src="/static/images/mine/wddd.png"></image>
          </view>
          <view>我的订单</view>
        </view>
        <view class="grid" @tap="addresses">
          <view class="image">
            <image src="/static/images/mine/shdz.png"></image>
          </view>
          <view>收货地址</view>
        </view>
        <view class="grid" @tap="services">
          <view class="image">
            <image src="/static/images/mine/gdfw.png"></image>
          </view>
          <view>更多服务</view>
        </view>
      </view>
    </view>
    <!-- service box end -->
    <!-- tips begin -->
    <!-- tisps end -->
  </view>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      newIcon:
        "https://img-shop.qmimg.cn/s16/images/2020/05/12/ffb0613dded704b6.png",
    };
  },
  computed: {
    ...mapState(["member"]),
    ...mapGetters(["isLogin"]),
    
  },
  onLoad() {
    
	this.isUserState()
  },
  methods: {
    isUserState() {
      if (!this.isLogin) {
         this.login();
       
      }
      return;
    },
    login() {
      uni.navigateTo({
        url: "/pages/login/login",
      });
    },
    addresses() {
      if (!this.isLogin) {
        this.login();
        return;
      }
      uni.navigateTo({
        url: "/pages/address/address",
      });
    },

    orders() {
      if (!this.isLogin) {
        this.login();
        return;
      }
      uni.navigateTo({
        url: "/pages/orders/orders",
      });
    },
  
  },
};
</script>

<style lang="scss" scoped>
page {
  height: auto;
  min-height: 100%;
}

.bg {
  width: 100%;
  height: calc(410 / 594 * 750rpx);
}

.user-box {
  //   background-color: red;

  position: absolute;
  border-radius: 8rpx;
  // margin-bottom: 30rpx;
  margin-top: -310rpx;
  box-shadow: $box-shadow;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  .login {
    width: 100%;
    display: flex;
    justify-content: center;
	align-items: center;
    padding: 0 40rpx;
    .login-btn {
      width: 50%;
      border-radius: 50rem !important;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10rpx 0;

    }
  }
  .user-detailed {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  flex-wrap: wrap;
    .user-img {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
      }
    }
    .user-name {
      margin-top: 25rpx;
      color: black;
    }
  }
}

.service-box {
  width: 100%;
  background-color: #ffffff;
  padding: 32rpx 30rpx 10rpx;
  box-shadow: $box-shadow;

  .row {
    display: flex;
    flex-wrap: wrap;
    color: $text-color-assist;
    font-size: $font-size-sm;
    padding-bottom: -40rpx;

    .grid {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 40rpx;
      width: 25%;
      position: relative;

      .image {
        image {
          width: 80rpx;
          height: 80rpx;
          margin-bottom: 20rpx;
        }
      }

      .new-badage {
        width: 40rpx;
        height: 40rpx;
        position: absolute;
        top: 0;
        right: 30rpx;
      }
    }
  }
}
</style>
